/**
 * 抽屉
 * @param {*} direction 
 */
function scDrawer(direction){
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    var box = null;
    var emit = null;

    /**
     * 创建视图
     */
    this.createView = function(option){
        option = option ? option : {};
        emit = option.emit;
        box = crEle(null, "sc-drawer");

        if(direction == "left"){
            box.classList.add("drawer-left");
        }else if(direction == "right"){
            box.classList.add("drawer-right");
        }

        var head = crEle(null, "sc-drawer-head");
        var titleBar = crEle(null, "sc-drawer-titlebar");
        var controlBar = crEle(null, "sc-drawer-controlbar");
        var closeBtn = crEle(null, "sc-controlbar-close");

        titleBar.innerText = "标题";
        closeBtn.innerText = "×";

        controlBar.appendChild(closeBtn);

        head.appendChild(titleBar);
        head.appendChild(controlBar);

        box.appendChild(head);

        var body = crEle(null, "sc-drawer-body");

        box.appendChild(body);

        closeBtn.addEventListener("click", ()=>{
            box.classList.remove("active");
            if(emit){
                emit("toolbarStatusChange", {
                    command: "openDrawer",
                    param: {
                        direction: direction
                    },
                    value: false
                });
            }
        });

        return box;
    }

    /**
     * 包含的组件
     */
    var components = [];

    /**
     * 执行命令
     * @param {*} name 
     * @param {*} value 
     * @param {*} option 
     */
    this.executeCommand = function(name, value, option){
        option = option ? option : {};
        if(name == "openDrawer" && direction == value.direction){
            let head = box.querySelector(".sc-drawer-head");
            let body = box.querySelector(".sc-drawer-body");

            body.innerHTML = "";
            
            if(value.show){
                box.classList.add("active");

                if(option.embed && option.component){
                    option.wrapHeight = box.clientHeight - head.clientHeight;
                    body.appendChild(option.component.createView(option));

                    if(components.indexOf(option.component) < 0){
                        components.push(option.component);
                    }

                    let title = box.querySelector(".sc-drawer-titlebar");
                    if(title && option.component.getTitle){
                        title.innerHTML = option.component.getTitle();
                    }
                }
            }else{
                box.classList.remove("active");
            }

            if(emit){
                emit("toolbarStatusChange", {
                    command: "openDrawer",
                    param: {
                        direction: value.direction
                    },
                    value: value.show === true
                });
            }
        }
    }

    /**
     * 通知
     * @param {*} eventType 
     * @param {*} opt 
     */
    this.notify = function(eventType, opt){
        for(var i in components){
            if(components[i].notify){
                components[i].notify(eventType, opt);
            }
        }
    }
}